<!doctype html>
<html>
  <head></head>
  <script type="importmap">
    {
      "imports": {
        "@apollo/client": "https://ga.jspm.io/npm:@apollo/client@0.0.0-pr-10915-20230616125401/index.js"
      },
      "scopes": {
        "https://ga.jspm.io/": {
          "@wry/equality": "https://ga.jspm.io/npm:@wry/equality@0.5.6/lib/index.js",
          "@wry/trie": "https://ga.jspm.io/npm:@wry/trie@0.4.3/lib/index.js",
          "graphql": "https://ga.jspm.io/npm:graphql@16.6.0/index.mjs",
          "graphql-tag": "https://ga.jspm.io/npm:graphql-tag@2.12.6/lib/index.js",
          "optimism": "https://ga.jspm.io/npm:optimism@0.18.0/lib/index.js",
          "react": "https://ga.jspm.io/npm:react@18.2.0/dev.index.js",
          "symbol-observable": "https://ga.jspm.io/npm:symbol-observable@4.0.0/lib/index.js",
          "ts-invariant": "https://ga.jspm.io/npm:ts-invariant@0.10.3/lib/invariant.js",
          "ts-invariant/process/index.js": "https://ga.jspm.io/npm:ts-invariant@0.10.3/process/index.js",
          "tslib": "https://ga.jspm.io/npm:tslib@2.5.3/tslib.es6.mjs",
          "zen-observable-ts": "https://ga.jspm.io/npm:zen-observable-ts@1.2.5/module.js"
        }
      }
    }
  </script>
  <script type="module">
    // give playwright time to load
    await new Promise((r) => setTimeout(r, 100));

    import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
    const client = new ApolloClient({
      uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
      cache: new InMemoryCache(),
    });
    client
      .query({
        query: gql`
          query {
            products {
              id
              title
            }
          }
        `,
      })
      .then((r) => {
        const main = document.querySelector("main");
        const ul = document.createElement("ul");
        main.replaceChildren(ul);
        r.data.products.forEach((p) => {
          const li = document.createElement("li");
          li.textContent = p.title;
          ul.appendChild(li);
        });
      })
      .catch(console.error);
  </script>

  <body>
    <h1>https://ga.jspm.io/npm:@apollo/client/index.js</h1>
    <main>
      <p>loading</p>
    </main>
  </body>
</html>
